<template>
<div>
    <header class="header">
        <div class="header-content">
            <div class="header-title">发现</div>
            <div class="search-bar" @click="goToSearch">
                <div class="search-button">
                    <span class="search-icon">🔍</span>
                    <span class="search-placeholder">搜索热门内容...</span>
                </div>
            </div>
            <div></div>
        </div>
    </header>

    <main class="main-content">
        <!-- 热门话题 -->
        <div class="section">
            <div class="section-header">
                <div class="section-title">🔥 热门话题</div>
                <a href="#" class="more-btn">查看更多</a>
            </div>
            <div class="trending-topics">
                <div class="topic-tag">#秋日穿搭</div>
                <div class="topic-tag">#网红美食</div>
                <div class="topic-tag">#旅行攻略</div>
                <div class="topic-tag">#居家生活</div>
                <div class="topic-tag">#健身打卡</div>
                <div class="topic-tag">#美妆教程</div>
                <div class="topic-tag">#摄影技巧</div>
            </div>
        </div>
        
        <!-- 推荐用户 -->
        <div class="section">
            <div class="section-header">
                <div class="section-title">👥 推荐关注</div>
                <a href="#" class="more-btn">查看更多</a>
            </div>
            <div class="users-grid">
                <div class="user-card" onclick="location.href='profile.html'">
                    <div class="user-avatar">👩</div>
                    <div class="user-name">时尚博主小美</div>
                    <div class="user-desc">分享最新时尚穿搭<br>粉丝 12.5k</div>
                    <button class="follow-btn">关注</button>
                </div>
                <div class="user-card" onclick="location.href='profile.html'">
                    <div class="user-avatar">🧑‍🍳</div>
                    <div class="user-name">美食家老李</div>
                    <div class="user-desc">探店达人，美食推荐<br>粉丝 8.9k</div>
                    <button class="follow-btn">关注</button>
                </div>
                <div class="user-card" onclick="location.href='profile.html'">
                    <div class="user-avatar">🏃‍♀️</div>
                    <div class="user-name">健身教练Anna</div>
                    <div class="user-desc">专业健身指导<br>粉丝 15.2k</div>
                    <button class="follow-btn">关注</button>
                </div>
                <div class="user-card" onclick="location.href='profile.html'">
                    <div class="user-avatar">📷</div>
                    <div class="user-name">摄影师小张</div>
                    <div class="user-desc">旅行摄影分享<br>粉丝 6.7k</div>
                    <button class="follow-btn">关注</button>
                </div>
            </div>
        </div>
        
        <!-- 分类筛选 -->
        <div class="section">
            <div class="section-header">
                <div class="section-title">📂 内容分类</div>
            </div>
            <div class="categories">
                <div class="category-item active">全部</div>
                <div class="category-item">美食</div>
                <div class="category-item">旅行</div>
                <div class="category-item">时尚</div>
                <div class="category-item">生活</div>
                <div class="category-item">美妆</div>
                <div class="category-item">健身</div>
                <div class="category-item">摄影</div>
            </div>
        </div>
        
        <!-- 热门内容 -->
        <div class="section">
            <div class="section-header">
                <div class="section-title">🌟 热门内容</div>
                <a href="#" class="more-btn">查看更多</a>
            </div>
            <div class="content-grid">
                <div class="post-card" onclick="location.href='detail.html'">
                    <div class="post-image">
                        <div class="hot-badge">HOT</div>
                        网红咖啡店
                    </div>
                    <div class="post-content">
                        <div class="post-title">这家咖啡店火了！ins风装修超出片</div>
                        <div class="post-author">
                            <div class="author-avatar"></div>
                            <div class="author-name">咖啡爱好者</div>
                        </div>
                        <div class="post-stats">
                            <span>❤️ 5.2k</span>
                            <span>💬 312</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-card" onclick="location.href='detail.html'">
                    <div class="post-image">
                        <div class="hot-badge">HOT</div>
                        秋季穿搭
                    </div>
                    <div class="post-content">
                        <div class="post-title">小个子女生秋季穿搭，显高又显瘦</div>
                        <div class="post-author">
                            <div class="author-avatar"></div>
                            <div class="author-name">穿搭达人</div>
                        </div>
                        <div class="post-stats">
                            <span>❤️ 4.8k</span>
                            <span>💬 256</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-card" onclick="location.href='detail.html'">
                    <div class="post-image">
                        减肥餐
                    </div>
                    <div class="post-content">
                        <div class="post-title">一周减肥餐搭配，好吃不胖还营养</div>
                        <div class="post-author">
                            <div class="author-avatar"></div>
                            <div class="author-name">健康生活家</div>
                        </div>
                        <div class="post-stats">
                            <span>❤️ 3.9k</span>
                            <span>💬 189</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-card" onclick="location.href='detail.html'">
                    <div class="post-image">
                        <div class="hot-badge">HOT</div>
                        旅行景点
                    </div>
                    <div class="post-content">
                        <div class="post-title">国庆小众旅行地推荐，人少景美</div>
                        <div class="post-author">
                            <div class="author-avatar"></div>
                            <div class="author-name">旅行达人</div>
                        </div>
                        <div class="post-stats">
                            <span>❤️ 6.1k</span>
                            <span>💬 423</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-card" onclick="location.href='detail.html'">
                    <div class="post-image">
                        护肤品
                    </div>
                    <div class="post-content">
                        <div class="post-title">学生党平价护肤品推荐，效果超好</div>
                        <div class="post-author">
                            <div class="author-avatar"></div>
                            <div class="author-name">美妆小白</div>
                        </div>
                        <div class="post-stats">
                            <span>❤️ 2.7k</span>
                            <span>💬 145</span>
                        </div>
                    </div>
                </div>
                
                <div class="post-card" onclick="location.href='detail.html'">
                    <div class="post-image">
                        居家收纳
                    </div>
                    <div class="post-content">
                        <div class="post-title">小户型收纳神器，让家瞬间变大</div>
                        <div class="post-author">
                            <div class="author-avatar"></div>
                            <div class="author-name">收纳达人</div>
                        </div>
                        <div class="post-stats">
                            <span>❤️ 3.2k</span>
                            <span>💬 167</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 底部占位盒子 -->
        <div class="bottom-bar"></div>
    </main>
</div>
</template>

<script lang="ts" setup>
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
    
const router = useRouter()

const goToSearch = () => {
    router.push('/Search')
}


onMounted(()=>{
    // 分类切换
    document.querySelectorAll('.category-item').forEach(item => {
        item.addEventListener('click', function() {
            document.querySelectorAll('.category-item').forEach(cat => {
                cat.classList.remove('active');
            });
            this.classList.add('active');
        });
    });

    // 关注按钮
    document.querySelectorAll('.follow-btn').forEach(btn => {
        btn.addEventListener('click', function(e) {
            e.stopPropagation();
            if (this.textContent === '关注') {
                this.textContent = '已关注';
                this.style.background = '#ccc';
            } else {
                this.textContent = '关注';
                this.style.background = '#ff6b6b';
            }
        });
    });
})

</script>

<style lang="scss" scoped>

/* #region 头部区域 */
.header {
    background: white;
    padding: 15px 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
}
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.header-title {
    font-size: 20px;
    font-weight: bold;
    color: #ff6b6b;
}
.search-bar {
    flex: 1;
    max-width: 400px;
    min-width: 110px;
    margin: 0 10px;
    position: relative;
}
.search-input {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;
    background: #f5f5f5;
}
/* #endregion 头部区域结束 */


/* #region 主内容区域 */
.main-content {
    margin-top: 80px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
}

.section {
    margin-bottom: 30px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.section-title {
    font-size: 18px;
    font-weight: 600;
}

.more-btn {
    color: #ff6b6b;
    font-size: 14px;
    text-decoration: none;
}

.trending-topics {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 10px;
}

.topic-tag {
    background: linear-gradient(45deg, #ff6b6b, #ffa500);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
    transition: transform 0.3s;
}

.topic-tag:hover {
    transform: scale(1.05);
}

.users-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

@media (min-width: 375px) and (max-width: 500px) {
    .users-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
}
@media (min-width: 500px) { /* 当屏幕宽度 ≥ 500px 时才生效的CSS样式 */
    .users-grid {
        display: flex;
        gap: 15px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 10px;
    }
    
    .users-grid::-webkit-scrollbar {
        display: none;
    }
}

.user-card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    cursor: pointer;
    transition: transform 0.3s;
}
@media (min-width: 500px) {
    .user-card {
        flex: 0 0 150px; // flex-grow: 0, flex-shrink: 0, flex-basis: 150px
    }
}

.user-card:hover {
    transform: translateY(-5px);
}

.user-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(45deg, #ff6b6b, #ffa500);
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
}

.user-name {
    font-weight: 500;
    margin-bottom: 5px;
    font-size: 14px;
    white-space: nowrap; /* 确保文本不会换行，保持在一行内 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-desc {
    color: #999;
    font-size: 12px;
    margin-bottom: 10px;
    line-height: 1.3;
    display: -webkit-box; /* 启用弹性盒子布局 */
    line-clamp: 2; /* 限制显示的行数为2行 */
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; /* 弹性盒子的布局方向为垂直 */
    overflow: hidden;
    text-overflow: ellipsis; /* 在被截断的文本末尾显示省略号 */
}

.follow-btn {
    padding: 6px 16px;
    background: #ff6b6b;
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.3s;
}

.follow-btn:hover {
    background: #ff5252;
}

.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 15px;
}
@media (min-width: 425px) and (max-width: 768px) {
  .content-grid {
    grid-template-columns: repeat(2, 1fr); /* 两列等宽 */
  }
}

.post-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    transition: transform 0.3s;
    cursor: pointer;
}

.post-card:hover {
    transform: translateY(-5px);
}

.post-image {
    width: 100%;
    height: 200px;
    background: linear-gradient(45deg, #ff9a9e, #fecfef);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    position: relative;
}

.hot-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ff4757;
    color: white;
    padding: 4px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
}

.post-content {
    padding: 15px;
}

.post-title {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 8px;
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.post-author {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.author-avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ff6b6b;
}

.author-name {
    font-size: 12px;
    color: #666;
}

.post-stats {
    display: flex;
    gap: 15px;
    margin-top: 8px;
    font-size: 12px;
    color: #999;
}

.categories {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none; // Firefox/Chrome
    -ms-overflow-style: none; // IE/Edge
    padding-bottom: 10px;
}

.category-item {
    background: white;
    border: 1px solid #ddd;
    padding: 8px 16px;
    border-radius: 20px;
    white-space: nowrap;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.category-item.active {
    background: #ff6b6b;
    color: white;
    border-color: #ff6b6b;
}
.bottom-bar{
    height: 50px;
}
/* #endregion 主内容区域结束 */

/* 搜索按钮样式 */
.search-button {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 20px;
    outline: none;
    background: #f5f5f5;
    font-size: 13px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.search-icon {
    margin-right: 8px;
    font-size: 14px;
}

.search-placeholder {
    color: #999;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>